<template>
  <nav class="navbar navbar-dark bg-primary px-4 mb-4">
    <div class="w-75 mx-auto navbar">
      <router-link class="navbar-brand" to="/">知乎专栏</router-link>
      <dropdown :title="`你好 ${user.nickName}`" v-if="user.isLogin">
        <dropdown-item>
          <router-link class="dropdown-item" to="/posts/create">
            新建文章
          </router-link>
        </dropdown-item>
        <dropdown-item>
          <router-link class="dropdown-item" :to="`/column/${user.column}`">
            我的专栏
          </router-link>
        </dropdown-item>
        <!-- <dropdown-item>
          <a class="dropdown-item" href="#">编辑资料</a>
        </dropdown-item> -->
        <dropdown-item>
          <a class="dropdown-item" href="javascript:void(0)" @click="logout">
            退出登录
          </a>
        </dropdown-item>
      </dropdown>
      <div v-else>
        <router-link to="/login">
          <button type="button" class="btn btn-outline-light me-2">登录</button>
        </router-link>
        <router-link to="/register">
          <button type="button" class="btn btn-outline-light">注册</button>
        </router-link>
      </div>
    </div>
  </nav>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import Dropdown from './Dropdown.vue'
import DropdownItem from './DropdownItem.vue'
import { IUserProp } from '@/types/index'
export default defineComponent({
  name: 'GlobalHeader',
  props: {
    user: {
      type: Object as PropType<IUserProp>,
      required: true
    }
  },
  components: {
    Dropdown,
    DropdownItem
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const logout = () => {
      store.commit('logout')
      router.push('/')
    }
    return {
      logout
    }
  }
})
</script>
